<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <#include "../../common/header.html">
    <!-- Morris charts -->
    <script src="${resurcePath}/cloudpay/adminlte/bower_components/raphael/raphael.min.js"></script>
    <script src="${resurcePath}/cloudpay/adminlte/bower_components/morris.js/morris.min.js"></script>
    <script src="${resurcePath}/cloudpay/adminlte/bower_components/fastclick/lib/fastclick.js"></script>

</head>
<body class="hold-transition skin-purple-light sidebar-mini">
<div class="wrapper">
    <!-- 	顶部和左侧菜单的jsp s -->
    <#include "../../common/menu.html">
    <!-- 	顶部和左侧菜单的jsp e -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>树叶数据列表</h1>
        </section>

        <section class="content-header condition clearfix ">
            <form action="#" id="fromCondition">
                <div class="form-group">
                    <label>摄像头ID:</label>
                    <select class="form-control select2" name="search_EQ_LONG_detectorId" id="detectorIdSelector">
                        <#list detectorList as detector>
                        <option value=${detector.trafficDetectorId}>${detector.name}</option>
                    </#list>
                    </select>
                </div>
                <div class="form-group">
                    <label>时间:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" class="form-control pull-right daterange"
                               name="search_DATERANGE_STRING_startTime" id="startTimeInput"/>
                    </div>
                </div>
                <!-- /.form group -->
                <div class="form-group" style="margin-top: 28px; margin-left: 15px;">
                    <input type="submit" value="查询" id="submit"/>&nbsp&nbsp
                    <input type="reset" value="清空" id="reset"/>
                </div>
            </form>
        </section>

        <!-- Main content -->
        <section class="content" style="padding-bottom: 0px;">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="dataTable" class="table table-bordered table-striped" style="width:1640px">
                                <thead id="thead1">
                                <tr>
                                    <th>记录名</th>
                                    <th>开始时间</th>
                                    <th>全树病变面积</th>
                                    <th>树叶病变面积</th>
                                    <th>树叶数量</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->


        <section class="content-header condition clearfix " style="padding: 0px 14px">
            <!-- data-toggle="modal" data-target="#modal-default"-->
            <button onclick="showTreeSickAreaChart();" class="btn btn-default" style="margin-right: 10px">全树病变面积变化图</button>
            <button onclick="showLeafSickAreaChart();" class="btn btn-default" style="margin-right: 10px">树叶病变面积变化图
            </button>
            <button onclick="showLeafNumberChart();" class="btn btn-default" style="margin-right: 10px">树叶数量变化图
            </button>
        </section>

        <section class="content-header condition clearfix " style="padding: 0px 14px;margin-top: 10px;">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title" id="chart-title">请选择需要展示的元素</h3>
                    <div class="box-tools pull-right">
                        <!--<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>-->
                        <!--</button>-->
                        <!--<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>-->
                    </div>
                </div>
                <div class="box-body chart-responsive">
                    <div class="chart" id="line-chart" style="height: 300px;"></div>
                </div>
                <!-- /.box-body -->
            </div>
        </section>
        <#include "../../common/errorMsg.html">

        <!--   <div class="modal fade" id="modal-default">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title">Default Modal</h4>
                      </div>
                      <div class="modal-body">

                          <p>One fine body&hellip;</p>

                         <div class="box box-info">
              <div class="box-header with-border">
                <h3 class="box-title">Line Chart</h3>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div>
              <div class="box-body chart-responsive">
                <div class="chart" id="line-chart" style="height: 300px;"></div>
              </div>
              /.box-body
            </div>
                          <div class="chart">
                              <canvas id="lineChart" style="height:250px"></canvas>
                          </div>
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                      </div>
                  </div>
                  /.modal-content
              </div>
              /.modal-dialog
          </div> -->
    </div>

</div>
<!-- ./wrapper -->
</body>
<script>
    /*  存放选中行的id的数组 */
    var selected = [];

    //adminlte表格的对象
    var datatable = null;
    var formValidator = null;
    var line = null;
    $(function () {

        var vm = new Vue({
            el: '#fromCondition',
            methods: {
                submitForm: function () {
                    datatable.draw();
                    //每次重画后,清空选中的记录
                    selected.splice(0, selected.length)
                }
            }
        })

        //校验器
        formValidator = $("#fromCondition").validate({
            onkeyup: false,
            focusInvalid: false,  //错误时,错误选项不会得到焦点
            focusCleanup: true,   //得到焦点时，清空错误提示信息
            submitHandler: function () { //表单提交句柄,为一回调函数，带一个参数：form
                vm.submitForm();
            },
            rules: {},
            messages: {}
        });

        datatable = $('#dataTable').DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': false,
            'ordering': true,
            'info': true,
            'autoWidth': false,
            "scrollX": true,
            "scrollY": true,
            "processing": true,
            "serverSide": true,
            "order": [[0, 'desc']],
            "pagingType": "full_numbers",
            "language": {
                "lengthMenu": "显示 _MENU_ 条记录",
                "zeroRecords": "没有符合条件的记录",
                "info": "第 _PAGE_ 页,共 _PAGES_ 页",
                "infoEmpty": "没有符合条件的记录",
                "paginate": {
                    "first": "第一页",
                    "next": "下一页",
                    "previous": "上一页",
                    "last": "最后一页"
                }
            },
            //如果查询条件有校验，需要加这个
            "preDrawCallback": function (settings) {
                if (!isEmpty(formValidator)) {
                    if (!formValidator.valid()) {
                        return false;
                    }
                }
            },
            "drawCallback": function (settings) {
                //每次重画后,清空选中的记录
                selected.splice(0, selected.length);
            },
            "ajax": {
                "url": "/tree/message/getMessageListData",
                "type": "POST",
                "data": function (d) {
                    var formData = $("#fromCondition").serializeJson();
                    for (var obj in formData) {
                        d[obj + ""] = formData[obj];
                    }
                }
            },
            "columns": [
                {"data": "treeMessageId", "orderable": false},
                {"data": "startTime"},
                {"data": "treeSickArea"},
                {"data": "leafSickArea"},
                {"data": "leafNumber"}
          
            ]
        })

        // LINE CHART
    });

    //查看全树面积变化图
    function showTreeSickAreaChart() {
        $('#chart-title').html("全树病变面积变化图 " + $('#startTimeInput').val());
        $('#line-chart').html("");

        //发送ajax
        $.ajax({
            url: '/tree/message/getAllMessageListData',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                type: 1,
                detectorId: $('#detectorIdSelector').val(),
                startTime: $('#startTimeInput').val()
            }),
            dataType: "json",
            success: function (result) {
                if (result.result_code == successRespCode) {
                    //alert("html before = " + $('#line-chart').html());
                    line = new Morris.Line({
                        element: 'line-chart',
                        resize: true,
                        data: result.drawData,
                        xkey: 'y',
                        ykeys: ['item1'],
                        labels: ['全树病变面积'],
                        lineColors: ['#3c8dbc'],
                        hideHover: 'true'
                    });

                    //alert($('#line-chart').html())
                } else {
                    alert(result.error_message);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("网络繁忙，请稍后再试");
            },
        });
    }
	
    
    //查看树叶面积变化图
    function showLeafSickAreaChart() {
        $('#chart-title').html("树叶病变面积变化图 " + $('#startTimeInput').val());
        $('#line-chart').html("");

        //发送ajax
        $.ajax({
            url: '/tree/message/getAllMessageListData',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                type: 2,
                detectorId: $('#detectorIdSelector').val(),
                startTime: $('#startTimeInput').val()
            }),
            dataType: "json",
            success: function (result) {
                if (result.result_code == successRespCode) {
                    line = new Morris.Line({
                        element: 'line-chart',
                        resize: true,
                        data: result.drawData,
                        xkey: 'y',
                        ykeys: ['item1'],
                        labels: ['树叶病变面积'],
                        lineColors: ['#3c8dbc'],
                        hideHover: 'true'
                    });
                } else {
                    alert(result.error_message);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("网络繁忙，请稍后再试");
            },
        });

    }
	
  //查看树叶数量变化图
    function showLeafNumberChart() {
        $('#chart-title').html("树叶数量变化图 " + $('#startTimeInput').val());
        $('#line-chart').html("");

        //发送ajax
        $.ajax({
            url: '/tree/message/getAllMessageListData',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                type: 3,
                detectorId: $('#detectorIdSelector').val(),
                startTime: $('#startTimeInput').val()
            }),
            dataType: "json",
            success: function (result) {
                if (result.result_code == successRespCode) {
                    line = new Morris.Line({
                        element: 'line-chart',
                        resize: true,
                        data: result.drawData,
                        xkey: 'y',
                        ykeys: ['item1'],
                        labels: ['树叶数量'],
                        lineColors: ['#3c8dbc'],
                        hideHover: 'true'
                    });
                } else {
                    alert(result.error_message);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("网络繁忙，请稍后再试");
            },
        });
    }

</script>
<script src="${resurcePath}/cloudpay/js/common/dataTable.js"></script>
<script src="${resurcePath}/cloudpay/js/common/exportexcel.js"></script>

</html>

